<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>treegrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
	href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>treegrid--js加载</h2>
	<div id="tb" style="padding:10px;height:auto">
		<div style="margin-bottom:5px">
			<a href="javascript:void(0);" class="easyui-linkbutton"
				iconCls="icon-add" plain="true" onclick="addRowsOpenDlg();">添加</a> <a
				href="javascript:void(0);" class="easyui-linkbutton"
				iconCls="icon-edit" plain="true" onclick="updRowsOpenDlg();">编辑</a>
			<a href="javascript:void(0);" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true" onclick="removeNode();">删除</a>
		</div>
	</div>
	<table id="dg" title="程式管理"></table>
</body>
<script type="text/javascript">
	var $dg;
	var $grid;
	var typedata = [ {
		"type" : "F",
		"typeName" : "菜单"
	}, {
		"type" : "O",
		"typeName" : "操作"
	} ];
	$.modalDialog = function(options) {
		if ($.modalDialog.handler == undefined) {// 避免重复弹出
			var opts = $.extend({
				title : '',
				width : 840,
				height : 680,
				modal : true,
				onClose : function() {
					$.modalDialog.handler = undefined;
					$(this).dialog('destroy');
				}
			}, options);
			opts.modal = true;// 强制此dialog为模式化，无视传递过来的modal参数
			return $.modalDialog.handler = $('<div/>').dialog(opts);
		}
	};

	$(function() {
		$dg = $("#dg");
		$grid = $dg
				.treegrid({
					width : 'auto',
					height : $(this).height() - 90,
					url : "datatree.json",
					rownumbers : true,
					animate : true,//伸展动画
					collapsible : true,//是否显示可折叠按钮
					fitColumns : true,//自动扩展或收缩列的大小
					striped : true,
					border : true,
					idField : 'permissionId',
					treeField : 'name',
					toolbar : '#tb',
					frozenColumns : [ [ {
						title : '程式名称',
						field : 'name',
						width : parseInt($(this).width() * 0.2),
						formatter : function(value) {
							return '<span style="color:red">' + value
									+ '</span>';
						}
					} ] ],//保持不动的列,不随滚动轴移动而移动.
					columns : [ [ //{field:'ck',checkbox:true},
							//{field : 'name',title : '程式名称',width : 250},
							{
								field : 'pname',
								title : '父程式名称',
								width : parseInt($(this).width() * 0.1),
								align : 'left'
							},
							{
								field : 'sort',
								title : '排序编码',
								width : parseInt($(this).width() * 0.1)
							},
							{
								field : 'iconCls',
								title : '程式图标',
								align : 'center',
								width : parseInt($(this).width() * 0.1),
								formatter : function(value, row) {
									return "<span class='"+row.iconCls+"' style='display:inline-block;vertical-align:middle;width:16px;height:16px;'></span>";
								}
							}, {
								field : 'url',
								title : '程式路径',
								width : parseInt($(this).width() * 0.1),
								align : 'left'
							}, {
								field : 'myid',
								title : '程式编码',
								width : parseInt($(this).width() * 0.1),
								align : 'left'
							}, {
								field : 'type',
								title : '程式类型',
								width : parseInt($(this).width() * 0.1),
								align : 'left',
								formatter : function(value, row) {
									if ("F" == row.type)
										return "<font color=green>菜单<font>";
									else
										return "<font color=red>操作<font>";
								}
							}, {
								field : 'isused',
								title : '是否启用',
								width : parseInt($(this).width() * 0.1),
								align : 'center',
								formatter : function(value, row) {
									if ("Y" == row.isused)
										return "<font color=green>是<font>";
									else
										return "<font color=red>否<font>";
								}
							}, {
								field : 'description',
								title : '程式描述',
								width : parseInt($(this).width() * 0.2),
								align : 'left'
							} ] ]
				});
	});
	
	function removeNode(){
		var node=$dg.treegrid("getSelected");
		if(node){
			parent.$.messager.confirm("提示","确定要删除记录吗?",function(r){
				if(r){
					//ajax success{...}
					parent.$.messager.show({
						title :"提示",
						msg :"删除成功!",
						timeout : 1000 * 2
					});
					$dg.treegrid('remove', node.permissionId);
				}
			});
		}else{
			parent.$.messager.show({
				title :"提示",
				msg :"请选择一行记录!",
				timeout : 1000 * 2
			});
		}
	}
	
	function addRowsOpenDlg() {
		var row=$dg.treegrid('getSelected');
		if(row){
			if(row.type=="O"){
				parent.$.messager.show({
					title :"提示",
					msg :"操作暂无下层!",
					timeout : 1000 * 2
				});
			}else{
				parent.$.modalDialog({
					title : "添加程式",
					width : 600,
					height : 400,
					href : "treeedit.jsp",
					onLoad:function(){
						var f = parent.$.modalDialog.handler.find("#form");
						f.form("load", {"pid":row.permissionId});//给当前节点添加子节点
					},	
					buttons : [ {
						text : '保存',
						iconCls : 'icon-ok',
						handler : function() {
							parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个treegrid，所以先预定义好
							var f = parent.$.modalDialog.handler.find("#form");
							f.submit();
						}
					}, {
						text : '取消',
						iconCls : 'icon-cancel',
						handler : function() {
							parent.$.modalDialog.handler.dialog('destroy');
							parent.$.modalDialog.handler = undefined;
						}
					}
					]
				});
			}
		}else{
			parent.$.modalDialog({
				title : "添加程式",
				width : 600,
				height : 400,
				href : "treeedit.jsp",
				buttons : [ {
					text : '保存',
					iconCls : 'icon-ok',
					handler : function() {
						parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个treegrid，所以先预定义好
						var f = parent.$.modalDialog.handler.find("#form");
						f.submit();
					}
				}, {
					text : '取消',
					iconCls : 'icon-cancel',
					handler : function() {
						parent.$.modalDialog.handler.dialog('destroy');
						parent.$.modalDialog.handler = undefined;
					}
				}
				]
			});
		}
	}
	
	//弹窗修改
	function updRowsOpenDlg() {
		var row = $dg.treegrid('getSelected');
		if (row) {
			parent.$.modalDialog({
				title : "编辑程式",
				width : 600,
				height : 400,
				href : "treeedit.jsp?tempId="+row.type,
				onLoad:function(){
					var f = parent.$.modalDialog.handler.find("#form");
					f.form("load", row);
				},
				buttons : [ {
					text : '编辑',
					iconCls : 'icon-ok',
					handler : function() {
						parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个treegrid，所以先预定义好
						var f = parent.$.modalDialog.handler.find("#form");
						f.submit();
					}
				}, {
					text : '取消',
					iconCls : 'icon-cancel',
					handler : function() {
						parent.$.modalDialog.handler.dialog('destroy');
						parent.$.modalDialog.handler = undefined;
					}
				}
				]
			});
		}else{
			parent.$.messager.show({
				title :"提示",
				msg :"请选择一行记录!",
				timeout : 1000 * 2
			});
		}
	}
</script>
</html>